<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Photo Sphere Viewer</title>
		<meta name="viewport" content="initial-scale=1.0" />
		<script src="lib/three.min.js"></script>
		<script src="lib/CSS3DRenderer.js"></script>
		<script src="lib/photo-sphere-viewer.js"></script>
		<script src="lib/persist.js"></script>
		<style>
			html, body {
				margin: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			#container {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<img id="arrow" src="pics/arrow.png" alt="" style="display:none;">
		<div id="container"></div>

		<script>

function getParameterByName(name) {
	name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
	var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
	results = regex.exec(location.search);
	return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

window.onload = function(){
	var tour = getParameterByName('tour');
	if(!tour){
		u = document.createTextNode("未知的Tour");
		document.body.appendChild(u);
		return;
	}
	var scene = getParameterByName('scene');
	if(!scene){
		scene = 0;
	}

	var div = document.getElementById('container');

	var onScenesLoaded = function(ss){
		var PSV = new PhotoSphereViewer({
			panorama: ss[scene].picture,
			waypoints : ss[scene].waypoints,
			container: div,
			default_position : 
			{lat : ss[scene].lookAt.lat,
			long : ss[scene].lookAt.lon},
			onready : function(){
				PSV.toggleAutorotate();
				PSV.toggleAutorotate();
			}
		});
		var switchScene = function(i){
			window.location.search = "?" + i;
		};

		PSV.addAction("switchscene",switchScene);
	};

	Persist.loadScenesFile("tours/" + tour +".json",onScenesLoaded);
};
		</script>
	</body>
</html>
